<ion-navbar *navbar hideBackButton>
  <ion-title>Floating Action Buttons</ion-title>
</ion-navbar>

<ion-content class="has-header components-demo">
  <p>
    <button fab primary fab-top fab-left>
      <ion-icon name='add'></ion-icon>
    </button>
    <button fab secondary fab-top fab-center>
      <ion-icon name='compass' is-active="false"></ion-icon>
    </button>
    <button fab danger fab-top fab-right>
      <ion-icon name='mic' is-active="false"></ion-icon>
    </button>
<!--     <button fab dark fab-bottom fab-center id="demo-fab-bottom">
      <ion-icon name=' is-active="false" heart></ion-icon>
    </button> -->
  </p>
</ion-content>

<button fab dark fab-bottom fab-center style="z-index: 999">
  <ion-icon name='heart' is-active="false"></ion-icon>
</button>

<ion-toolbar id="subtle-footer">
</ion-toolbar>
